.introCard-container-fadeIn {
  position: fixed;
  top: 22%;
  right: 9%;
  z-index: 999;
  width: 430px;
  height: 620px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  box-shadow: 0 0 5px 0 #6d9bf0;

  animation: fade-in 0.5s ease-in-out;
  @keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  .popup {
    width: 100%;
    height: 100%;
    padding: 10px 0;

    .popup-title {
      position: relative;
      width: 100%;
      height: 40px;
      padding: 0 10px;
      overflow: hidden;
      color: #fff;
      font-weight: bold;
      font-size: 16px;
      line-height: 40px;
      text-shadow: 0 0 0.25rem #fff, 0 0 0.3125rem #fff, 0 0 0.3125rem #3a85c5, 0 0 2.5rem #3a85c5,
        0 0 1.25rem #3a85c5, 0 0 1.25rem #3a85c5, 0 0 3.125rem #3a85c5, 0 0 3.125rem #3a85c5;
      background: none;

      .popup-title-scanning {
        width: 100%;
        height: 100%;
        padding-left: 50px;
        background: url('~@/assets/images/panorama/dataModal/标题栏.png') no-repeat;
        background-size: 100% 100%;
        &::after {
          position: absolute;
          top: 0;
          z-index: -10;
          display: block;
          width: 5.208vw;
          height: 100%;
          background-image: linear-gradient(to right, transparent 0%, #467cf0 100%);
          opacity: 0.7;
          animation: scanning 2s infinite linear;
          content: ' ';
        }
        @keyframes scanning {
          0% {
            left: 0;
            opacity: 0.7;
          }
          90% {
            left: 100%;
            opacity: 0.3;
          }
          100% {
            right: -1.042vw;
            opacity: 0;
          }
        }
      }
    }
    .popup-title-company {
      width: 100%;
      padding-left: 70px;
      color: #fad2d2;
    }

    .popup-content {
      width: 100%;
      height: 100%;
      padding: 5px 15px 15px 15px;
      color: #fff;
      p {
        font-size: 14px;
      }
      .popup-content-swiperImgs {
        width: 100%;
        margin-bottom: 10px;
        .popup-content-swiperImg {
          width: 100%;
          height: 180px;
          img {
            width: 100%;
            height: 100%;
            background-size: 100% 100%;
          }
        }
      }
      .popup-content-top {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
        .ctrItem {
          display: flex;
          flex-direction: column;
          width: 100%;
          padding: 8px;
          background-color: rgba(107, 175, 252, 0.1);
          border: 1px solid rgba(107, 175, 252, 0.1);
          border-radius: 5px;
          .title {
            padding-left: 10px;
            color: aqua;
            font-weight: bold;
            font-size: 16px;
            font-style: italic;
            text-align: left;
            background: linear-gradient(to right, rgba(0, 255, 255, 0.3), rgba(0, 255, 255, 0.1));
          }
          .importantText {
            color: transparent;
            font-weight: bold;
            background-image: linear-gradient(180deg, #62ffcb, #e1ff37);
            background-clip: text;
          }
          .content {
            padding: 3px 0 0 20px;
            font-weight: bold;
            font-size: 14px;
            text-align: left;

            div {
              overflow: hidden; /* 超出部分隐藏 */
              color: transparent;
              white-space: nowrap; /* 防止文本换行 */
              text-overflow: ellipsis; /* 超出部分显示省略号 (…) */
              background-image: linear-gradient(180deg, #c7f9e8, #abfff9);
              background-clip: text;
            }
          }
          .contentA {
            padding: 3px 0 0 26px;
            // font-weight: bold;
            font-size: 14px;
            div {
              color: transparent !important;
              background-image: linear-gradient(180deg, #c7f9e8, #abfff9) !important;
              background-clip: text !important;
            }
          }
        }
      }
    }
  }

  @keyframes scaleAnimation {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }

  /* 应用动画到元素 */
  .text-zoomInOut {
    animation: scaleAnimation 1.5s infinite ease-in-out;
  }
}

// 小屏设备（手机）适配
@media (max-width: 600px) {
  .introCard-container-fadeIn {
    top: 15%;
    // position: fixed;
    // top: 15%;
    left: -5vw;
    // width: 90vw;
    transform: scale(0.8);
  }
  // width: 40%; // 手机设备上宽度为90%
  // padding: 15px;
  // .card-title {
  //   font-size: 16px;
  // }
  // .card-body {
  //   font-size: 13px;
  // }
}
